<!DOCTYPE html>
<!-- saved from url=(0050)https://eleadmin.com/doc/iframe/#/start/?id=import -->
<html lang="zh"><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link href="https://eleadmin.com/assets/images/favicon.ico" rel="icon">
    <title>1、开始使用 - EasyWeb开发文档</title>
    <link rel="stylesheet" href="./docsify-vue.css">
    <link rel="stylesheet" href="./docsify-ew.css">
<style type="text/css">.medium-zoom-overlay{position:fixed;top:0;right:0;bottom:0;left:0;opacity:0;transition:opacity .3s;will-change:opacity}.medium-zoom--open .medium-zoom-overlay{cursor:pointer;cursor:zoom-out;opacity:1}.medium-zoom-image{cursor:pointer;cursor:zoom-in;transition:transform .3s}.medium-zoom-image--open{position:relative;cursor:pointer;cursor:zoom-out;will-change:transform}</style></head>
<body data-ids="2" data-page="start/README.md" class="ready sticky">
<main><button class="sidebar-toggle"><div class="sidebar-toggle-button"><span></span><span></span><span></span></div></button><aside class="sidebar"><h1 class="app-name"><a class="app-name-link" data-nosearch="" href="https://eleadmin.com/doc/iframe/">更新日志</a></h1><div class="sidebar-nav"><ul><li class=""><a href="https://eleadmin.com/doc/iframe/#/start/?id=import">1、开始使用</a><ul class="app-sub-sidebar"><li class="active"><a class="section-link" href="https://eleadmin.com/doc/iframe/#/start/?id=import">1.1.导入项目</a></li><li><a class="section-link" href="https://eleadmin.com/doc/iframe/#/start/?id=structure">1.2.项目结构</a></li><li><a class="section-link" href="https://eleadmin.com/doc/iframe/#/start/?id=declare">1.3.index.html结构说明</a></li><li><a class="section-link" href="https://eleadmin.com/doc/iframe/#/start/?id=add_menu">1.4.添加一个菜单</a></li><li><a class="section-link" href="https://eleadmin.com/doc/iframe/#/start/?id=commonjs">1.5.common.js说明</a></li><li><a class="section-link" href="https://eleadmin.com/doc/iframe/#/start/?id=setter">1.6.修改默认配置</a></li><li><a class="section-link" href="https://eleadmin.com/doc/iframe/#/start/?id=id_name">1.7.ID命名规范</a></li></ul></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/index/">2、index模块</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/admin/base">3、admin模块(基础)</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/admin/advance">4、admin模块(进阶)</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/admin_css/">5、公共样式</a></li><li class="collapse"><a href="javascript:;">6、扩展组件(常用)</a><ul class="app-sub-sidebar"><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/dropdown">6.1、下拉菜单</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/notice">6.2、消息通知</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/cascader">6.3、级联选择器</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/tags_input">6.4、标签输入框</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/split">6.5、分割面板</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/circle_progress">6.6、环形进度条</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/steps">6.7、步骤条</a></li></ul></li><li class="collapse"><a href="javascript:;">7、扩展组件(进阶)</a><ul class="app-sub-sidebar"><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/tablex">7.1、表格扩展tableX</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/formx">7.2、表单扩展formX</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/printer">7.3、打印插件</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/context_menu">7.4、鼠标右键</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/data_grid">7.5、数据列表dataGrid</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/expand/file_choose">7.6、文件选择器</a></li></ul></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/libs/">8、第三方插件</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/more/">9、更多功能</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/dialog/">10、弹窗专题</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/question/">11、常见问题</a></li><li class="collapse"><a href="https://eleadmin.com/doc/iframe/#/example/">12、常用实例</a></li></ul><div class="ew-doc-adv-list" style="margin-top: 20px;padding: 10px 16px 0 20px;">
    <a class="ew-doc-adv-item" href="https://w.url.cn/s/AL5zTDi" target="_blank" style="display: block;color: #666;border-radius: 6px;text-decoration: none;overflow: hidden;position: relative;line-height: initial;margin-bottom: 10px;">
        <div style="border: 1px solid rgba(128, 128, 128, .1);box-sizing: border-box;background-color: rgba(128, 128, 128, .05);height: 65px;padding: 4px 0 0 8px;border-radius: 6px;">
           <img src="./logo-system.png" height="55px" style="opacity: .8;">
           <div style="position: absolute;right: 15px;bottom: 6px;text-align: center;font-family: 微软雅黑;">
              <div style="font-size: 12px;font-weight: 500;margin-bottom: 2px;color: #737e8d;">
                 <div>YunGouOS支付API</div><div>官方签约 实时到账 多平台</div>
              </div>
              <span style="border-radius: 3px;display: inline-block;background-color: #07A1F9;color: rgba(255,255,255,.8);font-size: 12px;padding: 0 15px 1px 15px;opacity: .8;">前 往 查 看</span>
           </div>
        </div>
    </a>
</div>
</div></aside><section class="content"><article class="markdown-section" id="main"><h2 id="import"><a href="https://eleadmin.com/doc/iframe/#/start/?id=import" data-id="import" class="anchor"><span>1.1.导入项目</span></a></h2><ol><li>下载项目后进行解压</li><li>使用IDEA、WebStorm、HBuilder等前端开发工具打开</li><li>打开index.html点击右上角浏览器图标运行：</li></ol><p><img src="./mHOQTH.png" data-origin="https://s2.ax1x.com/2019/08/29/mHOQTH.png" alt="运行教程" class="medium-zoom-image"></p><p class="tip"><strong>注意：</strong> 必须以http://的形式访问，而不是file://的形式访问。</p><h2 id="structure"><a href="https://eleadmin.com/doc/iframe/#/start/?id=structure" data-id="structure" class="anchor"><span>1.2.项目结构</span></a></h2><pre v-pre="" data-lang=""><code class="lang-">|-assets
|     |-images            // 图片
|     |-js
|         |-common.js     // 公共js，主要配置layui扩展模块位置
|     |-libs              // 第三方库，echarts(图表)、layui
|     |-module            // layui扩展模块，版本更新只用替换此目录
|         |-img               // 框架用到的图片
|         |-admin.css         // 框架核心样式
|         |-admin.js          // admin模块
|         |-index.js          // index模块
|         |-********          // 其他扩展模块，不一一列举
|-page              // html页面
|-json              // 模拟数据
|-index.html        // 主页面</code></pre><p>与后端整合从index.html页面入手，page、json可以删除，assets整个目录都是静态资源，遇到问题先看控制台，
保证index.html无404问题，控制台network里面layui.js、common.js、index.js、admin.js能成功加载就表示成功整合了。</p><h2 id="declare"><a href="https://eleadmin.com/doc/iframe/#/start/?id=declare" data-id="declare" class="anchor"><span>1.3.index.html结构说明</span></a></h2><pre v-pre="" data-lang="html"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>assets/libs/layui/css/layui.css<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>link</span> <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>assets/module/admin.css<span class="token punctuation">"</span></span><span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-layout-body<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-layout layui-layout-admin<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 头部 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-header<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 侧边栏 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-side<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 主体部分 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-body<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token comment">&lt;!-- 底部 --&gt;</span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-footer<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>...<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>

    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>assets/libs/layui/layui.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/javascript<span class="token punctuation">"</span></span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>assets/js/common.js<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
        layui<span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'index'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">var</span> index <span class="token operator">=</span> layui<span class="token punctuation">.</span>index<span class="token punctuation">;</span>
            <span class="token comment">// 加载默认主页</span>
            index<span class="token punctuation">.</span><span class="token function">loadHome</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
                menuPath<span class="token punctuation">:</span> <span class="token string">'page/console/console.html'</span><span class="token punctuation">,</span>
                menuName<span class="token punctuation">:</span> <span class="token string">'&lt;i class="layui-icon layui-icon-home"&gt;&lt;/i&gt;'</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    </span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span></code></pre><p>index.html就是这样固定的结构，一般不需要修改，只用写子页面配置在侧边栏中即可。</p><blockquote>
<p>在整合到后端时，你可以把头部、侧边栏抽离出来，再include进去，便于维护。</p></blockquote>
<h2 id="add_menu"><a href="https://eleadmin.com/doc/iframe/#/start/?id=add_menu" data-id="add_menu" class="anchor"><span>1.4.添加一个菜单</span></a></h2><ol><li>打开index.html，找到侧导航栏部分，添加一个菜单：<pre v-pre="" data-lang="html"><code class="lang-html"><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>dd</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">lay-href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>xxx.html<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>XX管理<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>dd</span><span class="token punctuation">&gt;</span></span>
<span class="token comment">&lt;!-- 还可以增加ew-title属性自定义打开的Tab标题
&lt;a lay-href="xxx.html" ew-title="XXXXX"&gt;XX管理&lt;/a&gt; --&gt;</span></code></pre></li><li>在index.html同目录下新建一个xxx.html页面</li><li>运行index.html，查看效果</li></ol><p class="tip"><strong>注意：</strong> 是lay-href不是href，加图标用<code>ew-title="&lt;i class='layui-icon layui-icon-key'&gt;&lt;/i&gt;XX"</code>。</p><h2 id="commonjs"><a href="https://eleadmin.com/doc/iframe/#/start/?id=commonjs" data-id="commonjs" class="anchor"><span>1.5.common.js说明</span></a></h2><pre v-pre="" data-lang="javascript"><code class="lang-javascript">layui<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    base<span class="token punctuation">:</span> <span class="token function">getProjectUrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'assets/module/'</span>  <span class="token comment">// 配置layui扩展模块目录</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token punctuation">{</span>  <span class="token comment">// 配置每个模块分别所在的目录</span>
    notice<span class="token punctuation">:</span> <span class="token string">'notice/notice'</span><span class="token punctuation">,</span>
    step<span class="token punctuation">:</span> <span class="token string">'step-lay/step'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">use</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'admin'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">var</span> admin <span class="token operator">=</span> layui<span class="token punctuation">.</span>admin<span class="token punctuation">;</span>

<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 获取项目根路径</span>
<span class="token keyword">function</span> <span class="token function">getProjectUrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token keyword">return</span> <span class="token string">'...省略'</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span></code></pre><ul><li>layui.config的base是告诉layui扩展模块所在目录</li><li>layui.extend是配置每个模块具体js位置</li><li>getProjectUrl()是封装的获取项目根目录的方法</li></ul><p>像<code>admin.js</code>、<code>index.js</code>这些没有用子目录存放的模块不需要配置layui.extend，
getProjectUrl()可以保证不同路径的子页面引用common.js都能正确配置模块位置，原理是获取layui.js的全路径，
并截取assets之前的路径，所以你的layui需要在assets目录下面，assets上一层必须是项目根路径，
你也可以根据你的目录结构合理的修改getProjectUrl方法，比如assets改成static。</p><p class="tip"><strong>注意：</strong> 每个页面都需要引入common.js，如果增加了新模块记得在这里配置模块</p><br>

<h2 id="setter"><a href="https://eleadmin.com/doc/iframe/#/start/?id=setter" data-id="setter" class="anchor"><span>1.6.修改默认配置</span></a></h2><p>所有的配置都在common.js里面的layui.config中配置：</p><pre v-pre="" data-lang="javascript"><code class="lang-javascript">layui<span class="token punctuation">.</span><span class="token function">config</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    pageTabs<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>                <span class="token comment">// 关闭多标签</span>
    defaultTheme<span class="token punctuation">:</span> <span class="token string">'theme-colorful'</span><span class="token punctuation">,</span> <span class="token comment">// 默认主题</span>
    cacheTab<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>                <span class="token comment">// 刷新页面不恢复已经打开的Tab</span>
    maxTabNum<span class="token punctuation">:</span> <span class="token number">20</span><span class="token punctuation">,</span>                  <span class="token comment">// 最大打开的Tab数量</span>
    openTabCtxMenu<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>          <span class="token comment">// 关闭Tab鼠标右键菜单</span>
    tableName<span class="token punctuation">:</span> <span class="token string">'easyweb-iframe'</span><span class="token punctuation">,</span>    <span class="token comment">// 存储表名</span>
    navArrow<span class="token punctuation">:</span> <span class="token string">'arrow3'</span><span class="token punctuation">,</span>             <span class="token comment">// 侧边栏导航箭头</span>
    closeFooter<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>              <span class="token comment">// 是否关闭页脚</span>
    tabAutoRefresh<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>           <span class="token comment">// 是否切换Tab自动刷新页面</span>
    getAjaxHeaders<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span>   <span class="token comment">// ajax统一传递header</span>
    ajaxSuccessBefore<span class="token punctuation">:</span> <span class="token keyword">function</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span><span class="token comment">// ajax统一预处理</span>
    baseServer<span class="token punctuation">:</span> <span class="token string">''</span><span class="token punctuation">,</span>                 <span class="token comment">// admin.req的url会自动在前面加这个</span>
    reqPutToPost<span class="token punctuation">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>            <span class="token comment">// 为true会自动把put变post，delete变get并加_method</span>
    version<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>                  <span class="token comment">// 加载模块不缓存</span>
    apiNoCache<span class="token punctuation">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>               <span class="token comment">// ajax请求json不加版本号</span>
    tplOpen<span class="token punctuation">:</span> <span class="token string">'{{'</span><span class="token punctuation">,</span>                  <span class="token comment">// url弹窗模板引擎边界符</span>
    tplClose<span class="token punctuation">:</span> <span class="token string">'}}'</span><span class="token punctuation">,</span>                 <span class="token comment">// url弹窗模板引擎边界符</span>
    defaultLoading<span class="token punctuation">:</span> <span class="token number">1</span><span class="token punctuation">,</span>              <span class="token comment">// 默认的加载动画(只控制admin.showLoading的默认)</span>
    base<span class="token punctuation">:</span> <span class="token function">getProjectUrl</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'assets/module/'</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span></code></pre><ul><li>tableName   是前端放缓存的表名，如果一个域名下有多个项目，需要修改成不同的名称。</li><li>apiNoCache   admin.ajax请求如果配置了version会自动加版本号解决缓存，配置为true如果请求的json数据则不加。</li></ul><p>在设置界面修改的配置会高于默认配置，设置界面的配置是放在缓存中，清除缓存就会以默认配置为主，这些配置参数都有合适的默认值，
根据你的需要加，不是全部都要写上。</p><p><strong>如何读取这些配置信息：</strong></p><pre v-pre="" data-lang="javascript"><code class="lang-javascript"><span class="token keyword">var</span> setter <span class="token operator">=</span> admin<span class="token punctuation">.</span>setter<span class="token punctuation">;</span>

console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>setter<span class="token punctuation">)</span><span class="token punctuation">;</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>setter<span class="token punctuation">.</span>version<span class="token punctuation">)</span><span class="token punctuation">;</span>

<span class="token comment">// 也可以用layui.cache</span>
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>layui<span class="token punctuation">.</span>cache<span class="token punctuation">.</span>version<span class="token punctuation">)</span><span class="token punctuation">;</span></code></pre><p class="tip">3.1.6版本开始都在这里配置，不用每次修改admin.js、index.js了。</p><br>

<h2 id="id_name"><a href="https://eleadmin.com/doc/iframe/#/start/?id=id_name" data-id="id_name" class="anchor"><span>1.7.ID命名规范</span></a></h2><p>ID命名规范是SPA单页面版强烈建议的，非SPA单页版也建议ID参考此规范来命名。</p><p><strong>总体命名规则xxxXxxXxx</strong></p><ul><li>第一个xxx   模块名，比如用户模块<code>user</code></li><li>第二个Xxx   功能描述，比如添加<code>Add</code></li><li>第三个Xxx   元素类型，比如按钮<code>Btn</code></li></ul><p>例如页面是user.html，它的各个元素命名如下：</p><p><strong>按钮的命名</strong></p><pre v-pre="" data-lang="html"><code class="lang-html"><span class="token comment">&lt;!-- 命名规则：xxxXxxBtn --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userAddBtn<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-btn<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>添加<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userEditBtn<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-btn<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>修改<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userDelBtn<span class="token punctuation">"</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-btn<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>删除<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span></code></pre><p><strong>表格的命名</strong></p><pre v-pre="" data-lang="html"><code class="lang-html"><span class="token comment">&lt;!-- 命名规则：xxxTable --&gt;</span>
&lt;table id="userTable" lay-filter=""userTable"&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 表格上方搜索表单，命名规则：xxxTbSearchForm，id和lay-filter是非必须的 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>form</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-form<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userTbSearchForm<span class="token punctuation">"</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userTbSearchForm<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span>
    <span class="token comment">&lt;!-- 输入框部分省略... --&gt;</span>
    <span class="token comment">&lt;!-- 搜索提交按钮命名规则：xxxTbSearch --&gt;</span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>button</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>layui-btn<span class="token punctuation">"</span></span> <span class="token attr-name">lay-filter</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userTbSearch<span class="token punctuation">"</span></span> <span class="token attr-name">lay-submit</span><span class="token punctuation">&gt;</span></span>搜索<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>button</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>form</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 表格操作列，命名规则：xxxTbBar --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/html<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userTbBar<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
    <span class="token operator">&lt;</span>a <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"layui-btn"</span> lay<span class="token operator">-</span>event<span class="token operator">=</span><span class="token string">"edit"</span><span class="token operator">&gt;</span>修改<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"layui-btn"</span> lay<span class="token operator">-</span>event<span class="token operator">=</span><span class="token string">"del"</span><span class="token operator">&gt;</span>删除<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 表格其他复杂列，例如switch状态开关等，命名规则：xxxTbXxx --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/html<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userTbState<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
    <span class="token operator">&lt;</span>input type<span class="token operator">=</span><span class="token string">"checkbox"</span> lay<span class="token operator">-</span>filter<span class="token operator">=</span><span class="token string">"userTbStateCk"</span> value<span class="token operator">=</span><span class="token string">"{{d.userId}}"</span> lay<span class="token operator">-</span>skin<span class="token operator">=</span><span class="token string">"switch"</span>
           lay<span class="token operator">-</span>text<span class="token operator">=</span><span class="token string">"正常|锁定"</span> <span class="token punctuation">{</span><span class="token punctuation">{</span>d<span class="token punctuation">.</span>state<span class="token operator">==</span><span class="token number">0</span><span class="token operator">?</span><span class="token string">'checked'</span><span class="token punctuation">:</span><span class="token string">''</span><span class="token punctuation">}</span><span class="token punctuation">}</span><span class="token operator">/</span><span class="token operator">&gt;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre><p><strong>一个页面有多个表格的命名</strong></p><pre v-pre="" data-lang="html"><code class="lang-html"><span class="token comment">&lt;!-- 命名规则：xxxXxxTable --&gt;</span>
<span class="token comment">&lt;!-- 例如这是一个用户订单记录表 --&gt;</span>
&lt;table id="userOrderTable" lay-filter=""userOrderTable"&gt;<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>table</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 表格操作列，命名规则：xxxXxxTbBar --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/html<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userOrderTbBar<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
    <span class="token operator">&lt;</span>a <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"layui-btn"</span> lay<span class="token operator">-</span>event<span class="token operator">=</span><span class="token string">"edit"</span><span class="token operator">&gt;</span>修改<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>a <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"layui-btn"</span> lay<span class="token operator">-</span>event<span class="token operator">=</span><span class="token string">"del"</span><span class="token operator">&gt;</span>删除<span class="token operator">&lt;</span><span class="token operator">/</span>a<span class="token operator">&gt;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre><p><strong>表单弹窗的命名</strong></p><pre v-pre="" data-lang="html"><code class="lang-html"><span class="token comment">&lt;!-- 页面层弹窗命名规则：xxxEditDialog，非页面层可以忽略script --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/html<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userEditDialog<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 表单命名规则：xxxEditForm <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>form id<span class="token operator">=</span><span class="token string">"userEditForm"</span> lay<span class="token operator">-</span>filter<span class="token operator">=</span><span class="token string">"userEditForm"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"layui-form model-form"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 输入框部分省略<span class="token operator">...</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 提交按钮命名规则：xxxEditSubmit <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"layui-btn"</span> lay<span class="token operator">-</span>filter<span class="token operator">=</span><span class="token string">"userEditSubmit"</span> lay<span class="token operator">-</span>submit<span class="token operator">&gt;</span>保存<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">&gt;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre><p><strong>页面其他弹窗的命名</strong></p><pre v-pre="" data-lang="html"><code class="lang-html"><span class="token comment">&lt;!-- 例如这是一个查看详情弹窗 --&gt;</span>
<span class="token comment">&lt;!-- 页面层弹窗命名规则：xxxXxxDialog，非页面层可以忽略script --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/html<span class="token punctuation">"</span></span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userInfoDialog<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token script language-javascript">
    <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 表单命名规则：xxxXxxForm <span class="token operator">--</span><span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span>form id<span class="token operator">=</span><span class="token string">"userInfoForm"</span> lay<span class="token operator">-</span>filter<span class="token operator">=</span><span class="token string">"userInfoForm"</span> <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"layui-form model-form"</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 输入框部分省略<span class="token operator">...</span> <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span><span class="token operator">!</span><span class="token operator">--</span> 提交按钮命名规则：xxxXxxSubmit <span class="token operator">--</span><span class="token operator">&gt;</span>
        <span class="token operator">&lt;</span>button <span class="token keyword">class</span><span class="token operator">=</span><span class="token string">"layui-btn"</span> lay<span class="token operator">-</span>filter<span class="token operator">=</span><span class="token string">"userInfoSubmit"</span> lay<span class="token operator">-</span>submit<span class="token operator">&gt;</span>保存<span class="token operator">&lt;</span><span class="token operator">/</span>button<span class="token operator">&gt;</span>
    <span class="token operator">&lt;</span><span class="token operator">/</span>form<span class="token operator">&gt;</span>
</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span></code></pre><p>表单里面的input建议少用id，只用name，取input的值通过监听表单提交来取，用input通过<code>$('#xxxForm [name="xxx"]')</code>来写。</p><p><strong>其他元素ID命名</strong></p><pre v-pre="" data-lang="html"><code class="lang-html"><span class="token comment">&lt;!-- 命名规则：xxxXxxXxx，第一个xxx是模块名，第二个Xxx是功能描述，第三个Xxx是元素类型 --&gt;</span>

<span class="token comment">&lt;!-- 例如角色选择的下拉框 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>select</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userRoleSel<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>select</span><span class="token punctuation">&gt;</span></span>

<span class="token comment">&lt;!-- 例如备注的输入框 --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>input</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userCommentsEdt<span class="token punctuation">"</span></span> <span class="token punctuation">/&gt;</span></span></code></pre><p><strong>元素类型简写</strong></p><table>
<thead>
<tr>
<th>元素</th>
<th>简写</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>按钮类</td>
<td><code>Btn</code></td>
<td><code>&lt;button&gt;</code>、<code>.layui-btn</code>等</td>
</tr>
<tr>
<td>输入类的</td>
<td><code>Edt</code></td>
<td>EditText的简写，<code>input</code>、<code>textarea</code>等</td>
</tr>
<tr>
<td>选择类的</td>
<td><code>Sel</code></td>
<td>下拉框、多选下拉框等</td>
</tr>
<tr>
<td>表格</td>
<td><code>Table</code></td>
<td><code>id="userTable"</code>、<code>id="userOrderTable"</code>等</td>
</tr>
<tr>
<td>表格附加组件</td>
<td><code>Tb</code></td>
<td><code>id="userTbBar"</code>、<code>id="userOrderTbBar"</code>等</td>
</tr>
<tr>
<td>弹窗</td>
<td><code>Dialog</code></td>
<td><code>id="userEditDialog</code>、<code>id="userInfoDialog"</code>等</td>
</tr>
<tr>
<td>表单</td>
<td><code>Form</code></td>
<td><code>id="userEditForm</code>、<code>id="userInfoForm"</code>等</td>
</tr>
<tr>
<td>表单提交按钮</td>
<td><code>Submit</code></td>
<td><code>id="userEditSubmit"</code>、<code>id="userInfoSubmit"</code>等</td>
</tr>
</tbody></table>
<p><strong>页面的命名</strong></p><pre v-pre="" data-lang="html"><code class="lang-html"><span class="token comment">&lt;!-- 命名格式：xxxApp --&gt;</span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>userApp<span class="token punctuation">"</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span></code></pre><blockquote>
<p>以上规则只是规范，非必须要求</p></blockquote>
</article></section></main>
<!-- js部分 -->
<script src="./jquery-3.2.1.min.js.下载"></script>
<script src="./main.js.下载"></script>


<div class="ew-back-top" style="display: none;"></div><div class="ew-tips-auth">临时查看文档权限，截至到：10-31 23:59</div><div class="progress" style="opacity: 0; width: 0%;"></div></body></html>